<!-- 房源模型table -->
<template>
  <div class=''>
    <table ref='tables' class="tabBox">
      <tr class="title tabCommon">
        <th v-if="productType != 3">
          {{ productType == 1 ? "楼层" : "分区" }}
        </th>
        <th :colspan="isImported ? item.maxRoomCount : item.roomSetCount">
          <Checkbox v-model="item.isSelected"
            @on-change="roomChange(item.isSelected,item.unitId,'unit',item.unitId)"></Checkbox>
          <span v-if="isControl">{{ item.unitName }}</span>
          <Poptip v-else trigger="hover">
            {{ item.unitName }}
            <div slot="content">
              <div class=" impotBtn" @click="updataUnitNameClick(item.unitId)">
                修改名称
              </div>
              <div class="impotBtn" @click="delUnitName(item.unitId)">
                删除
              </div>
            </div>
          </Poptip>
        </th>
      </tr>

      <tr class="subtitle tabCommon">
        <td v-if="productType != 3">&nbsp;</td>
        <td v-for="(colsItem, index) in item.colsData" :key="index">
          <Checkbox v-model="colsItem.isSelected"
            @on-change="roomChange(colsItem.isSelected, index, 'cols', item.unitId)">
          </Checkbox>
          全列
        </td>
      </tr>

      <tr class="floor tabCommon" v-for="(floorItem, index) in item.floorDTOS" :key="index">
        <td class="floorNum" v-if="productType != 3">
          <Checkbox v-model="floorItem.isSelected"
            @on-change="roomChange(floorItem.isSelected, floorItem.floorId,'floor',item.unitId)">
          </Checkbox>
          <span
            v-if="isControl">{{ productType == 1 ? index + 1 : floorItem.floorName }}</span>
          <Poptip v-else trigger="hover">
            {{ productType == 1 ? index + 1 : floorItem.floorName }}
            <div slot="content">
              <div class="impotBtn" @click="delFloor(item.unitId, floorItem.floorId)">
                删除
              </div>
            </div>
          </Poptip>
        </td>
        <td v-for="(roomItem, roomIndex) in floorItem.roomDTOS" :key="roomIndex"
          :class="{'orderVal':roomItem.sellStatus==3||roomItem.sellStatus==4}"
          :style="'background:'+roomItem.statusColor+';'">
          <Checkbox v-if="!roomItem.unControl&&roomItem.roomCode" v-model="roomItem.isSelected"
            @on-change="roomChange(roomItem.isSelected,roomItem.roomId,'room',item.unitId,roomIndex)">
          </Checkbox>
          <span v-else style="margin-right: 26px;" />
          <span style="font-weight: 500;cursor: pointer;"
            :style="'color:' + ((roomItem.statusColor && roomItem.statusColor!='#FFFFFF') ? 'white;' : ';')"
            @mouseenter='roomCodeMouseover(roomItem,$event)'
            @mouseleave="roomCodeMouseleave()">
            {{ roomItem.roomCode }}
          </span>
        </td>
      </tr>
    </table>
    <transition name="fade">
      <div v-show='roomCodeStatus' class="popAll" :style="{ left: roomLeft,bottom:roomTop }">
        <div class="popCon">
          <p><span>房源名称：</span><span>{{roomCurrentData.roomName}}</span></p>
          <p v-if="isControl"><span>表单价：</span><span>{{roomCurrentData.facePrice}}元</span></p>
          <p v-if="isControl"><span>表总价：</span><span>{{roomCurrentData.faceTotalPrice}}元</span>
          </p>
          <p>
            <span>售卖状态：</span><span>{{$formatter.switchName('salesStatus',roomCurrentData.sellStatus)}}</span>
          </p>
          <template v-if="isControl">
            <p><span>认购日期：</span><span>{{roomCurrentData.subscriptionDate}}</span></p>
            <p><span>认购顾问：</span><span>{{roomCurrentData.counselorName}}</span></p>
            <p><span>签约日期：</span><span>{{roomCurrentData.contractDate}}</span></p>
            <p><span>签约姓名：</span><span>{{roomCurrentData.contractorName}}</span></p>
            <p><span>客户姓名：</span><span>{{roomCurrentData.customerName}}</span></p>
          </template>
          <template v-else>
            <p>
              <span>关联户型：</span><span>{{roomCurrentData.roomType?roomCurrentData.roomType:''}}</span>
            </p>
            <p><span>面积：</span><span>{{roomCurrentData.area}}㎡</span></p>
            <p><span>赠送面积：</span><span>{{roomCurrentData.giveArea}}㎡</span></p>
            <p><span>表单价：</span><span>{{roomCurrentData.facePrice}}元</span></p>
            <p><span>表总价：</span><span>{{roomCurrentData.faceTotalPrice}}元</span></p>
            <p><span>底单价：</span><span>{{roomCurrentData.basicPrice}}元</span></p>
            <p><span>底总价：</span><span>{{roomCurrentData.basicTotalPrice}}元</span></p>
          </template>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        roomCodeStatus: false,
        roomCurrentData: {},
        roomTop: 0,
        roomLeft: 0,
      };
    },
    props: ['item', 'unitDTOS', 'productType', 'isImported', 'isControl'],
    methods: {
      roomCodeMouseover(data, e) {
        let docH = document.querySelector('.popAll').offsetHeight
        let bodyH = document.body.offsetHeight
        this.roomTop = (bodyH - e.pageY + 13) + 'px'
        this.roomLeft = e.pageX - 77 + 'px'
        this.roomCurrentData = data
        this.roomCodeStatus = true
      },
      roomCodeMouseleave() {
        this.roomCurrentData = {}
        this.roomCodeStatus = false
      },
      addIsSelected(obj, val) {
        this.$set(obj, 'isSelected', val)
      },
      // 表格操作选中不选中
      unitOnclick(event, levelId, levelName, fatherId, roomIndex) {
        console.log(event, levelId, levelName, '选中单元')
        if (levelName == 'unit') {
          // 方法一
          let ind = this.unitDTOS.findIndex((item) => {
            return item.unitId == levelId
          })
          this.addIsSelected(this.unitDTOS[ind], event)

          this.unitDTOS[ind].colsData.forEach((colsItem) => {
            this.addIsSelected(colsItem, event)
          })

          this.unitDTOS[ind].floorDTOS.forEach((floorItem) => {
            this.addIsSelected(floorItem, event)
            if (floorItem.roomDTOS) {
              floorItem.roomDTOS.forEach((roomItem) => {
                this.addIsSelected(roomItem, event)
              })
            }
          })
        } else if (levelName == 'floor') {
          let ind = this.unitDTOS.findIndex((item) => {
            return item.unitId == fatherId
          })
          let indFloor = this.unitDTOS[ind].floorDTOS.findIndex((floorItem) => {
            return floorItem.floorId == levelId
          })
          this.addIsSelected(this.unitDTOS[ind].floorDTOS[indFloor], event)
          this.unitDTOS[ind].floorDTOS[indFloor].roomDTOS.forEach((roomItem) => {
            this.addIsSelected(roomItem, event)
          })
        } else if (levelName == 'cols') {
          console.log(event, levelId, levelName, fatherId, 'cols')
          let ind = this.unitDTOS.findIndex((item) => {
            return item.unitId == fatherId
          })
          this.unitDTOS[ind].floorDTOS.forEach((floorItem) => {
            if (floorItem.roomDTOS) {
              console.log(
                floorItem.roomDTOS,
                floorItem.roomDTOS[levelId],
                'floorItem.roomDTOS[levelId]'
              )
              if (floorItem.roomDTOS[levelId]) {
                this.addIsSelected(floorItem.roomDTOS[levelId], event)
              }
            }
          })
        }

        // 单元的选中按钮

        let ind = this.unitDTOS.findIndex((item) => {
          return item.unitId == fatherId
        })
        console.log(this.unitDTOS[ind].floorDTOS, 'this.unitDTOS[ind].floorDTOS11111111');

        let unitFlag = this.unitDTOS[ind].floorDTOS.some((floorItem) => {
          if (floorItem.roomDTOS && floorItem.roomDTOS.length) {
            return floorItem.roomDTOS.some((roomItem) => {
              return roomItem.isSelected == false
            })
          } else {
            return true
          }

        })

        if (unitFlag) {
          this.unitDTOS[ind].isSelected = false
        } else {
          this.unitDTOS[ind].isSelected = true
        }


        // 楼层的选中按钮
        console.log(this.unitDTOS[ind].floorDTOS, 'this.unitDTOS[ind].floorDTOS');
        this.unitDTOS[ind].floorDTOS.forEach((floorItem) => {
          if (floorItem.roomDTOS && floorItem.roomDTOS.length) {
            let floorFlag = floorItem.roomDTOS.some((roomItem) => {
              return roomItem.isSelected == false
            })
            if (floorFlag) {
              floorItem.isSelected = false
            } else {
              floorItem.isSelected = true
            }
          }

        })

        // 列的选中按钮
        let i
        let roomFlag = this.unitDTOS[ind].floorDTOS.some((floorItem) => {
          return floorItem.roomDTOS.some((roomItem, index) => {
            i = index
            return roomItem.isSelected == false
          })
        })
        if (roomFlag) {
          this.unitDTOS[ind].colsData[i].isSelected = false
        }
        if (levelName == 'room') {
          let roomFlag2 = this.unitDTOS[ind].floorDTOS.every(
            (floorItem, index) => {
              if (floorItem.roomDTOS[roomIndex]) {
                return floorItem.roomDTOS[roomIndex].isSelected == true
              } else {
                return true
              }
            }
          )
          if (roomFlag2) {
            this.unitDTOS[ind].colsData[roomIndex].isSelected = true
          } else {
            this.unitDTOS[ind].colsData[roomIndex].isSelected = false
          }
        }
        this.roomEditVOS = []
        this.unitDTOS.forEach((item) => {
          item.floorDTOS.forEach((floorItem) => {
            floorItem.roomDTOS.forEach((roomItem) => {
              if (roomItem.isSelected == true) {
                this.roomEditVOS.push(roomItem)
              }
            })
          })
        })

        console.log(this.roomEditVOS, '即将操作的房间列表')
        // this.unitDTOSLength = this.roomEditVOS ? this.roomEditVOS.length : 0
        this.$emit('roomSelChange', this.roomEditVOS)
      },
      delFloor(unitId, floorId) {
        this.$parent.delFloor(unitId, floorId)
      },
      // poptit 删除单元
      delUnitName(unitId) {
        this.$parent.delUnitName(unitId)
      },
      updataUnitNameClick(val) {
        this.$parent.updataUnitNameClick(val)
      },
      roomChange(event, levelId, levelName, fatherId, roomIndex) {
        this.unitOnclick(event, levelId, levelName, fatherId, roomIndex)
      }
    },
    mounted() {

    },
  }
</script>
<style lang='scss' scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter,
  .fade-leave-to

  /* .fade-leave-active below version 2.1.8 */
    {
    opacity: 0;
  }

  .tabBox {
    height: fit-content;

    input {
      margin: 5px;
      vertical-align: -2px;
    }
  }

  table {
    margin: 5px;
    border-collapse: collapse;
    border: 1px solid #dcdee2;
  }

  td,
  th {
    border-collapse: collapse;
    border: 1px solid #dcdee2;
    padding: 0 20px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    width: 110px;
  }

  .impotBtn {
    line-height: 2;
    cursor: pointer;
    color: #2d8cf0;
    text-align: center;
    font-weight: normal;

    &:first-child {
      border-bottom: 1px #e8eaec solid;
    }
  }

  .updataUnitNameBox {
    padding: 20px;
  }

  .updataModal {
    z-index: 1061;
  }

  .creatFloorBox {
    max-height: 450px;
    overflow-y: auto;

    p {
      display: flex;
      flex-direction: row;
      min-height: 50px;
      margin-top: 10px;

      span {
        line-height: 32px;
        flex: 0 0 90px;
        text-align: right;
      }
    }
  }

  .popAll {
    position: absolute;
    background: #fff;
    z-index: 1000;
    background: #ebf7ff !important;
    background-clip: padding-box;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
    white-space: nowrap;
    padding: 8px 16px;

    .popCon {
      p {
        line-height: 2;
        overflow: hidden;
        text-align: right;

        span {
          float: left;
        }

        span:first-child {
          display: inline-block;
          width: 80px;
        }
      }
    }
  }

  .orderVal {
    background: #f8f8f9;
  }
</style>